<script setup>
	import {
		ref
	} from 'vue'
	import {
		orderStore,
		loginToken
	} from '@/stores'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const isShow = ref(false)
	const store = orderStore()
	const tokenStore = loginToken()

	const checkOrder = (index, status) => {
		uni.navigateTo({
			url: `/pages/order/orderDetail?index=${index}&status=${status}`
		})
	}
	onLoad(() => {
		if (!tokenStore.token) {
			uni.redirectTo({
				url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/my/my')
			})
		}
	})
</script>

<template>
	<uni-nav-bar :fixed="true" background-color="#03bf5f" title="行程" color="white" status-bar :border="false" />
	<view class="journey" v-if="store.orderList?.length">
		<text class="state">进行中订单</text>
		<view class="orderForm" v-for="(item,index) in store.orderList" :key="index"
			@click="checkOrder(index,item.status)" v-if="store.orderList">
			<view class="condition">
				<text class="amount">{{item.way}} {{item.store}}人</text>
				<text class="status">{{item.status}}<text>></text></text>
			</view>
			<my-imagetext imgurl="/static/images/my.png" :text="item.time"></my-imagetext>
			<view class="divider"></view>
			<view class="start">
				<view class="point"></view>
				<text>{{item.startAddress}}</text>
			</view>
			<view class="end">
				<view class="point"></view>
				<text>{{item.endAddress}}</text>
			</view>
		</view>
	</view>
	<view class="empty" v-else>
		<image src="/static/images/wel.png"></image>
	</view>
</template>

<style lang="scss" scoped>
	@import "../../styles/_rpx.scss";

	.journey {
		font-size: rpx(12);
	}

	.state {
		display: flex;
		margin: rpx(20) 0 rpx(12) rpx(25);
	}

	.orderForm {
		display: flex;
		flex-direction: column;
		width: rpx(354);
		height: rpx(132);
		margin: 0 auto rpx(10) auto;
		background-color: #ffffff;
		border-radius: rpx(10);

		.condition {
			display: flex;
			margin: rpx(15) 0 rpx(8) rpx(12);
			justify-content: space-between;
			font-weight: bold;

			.status {
				color: #03bf5f;
				margin-right: rpx(18);

				text {
					color: black;
				}
			}
		}

		.start {
			display: flex;
			margin-bottom: rpx(8);
			font-size: rpx(13);

			.point {
				background-color: #35ac91;
			}
		}

		.end {
			display: flex;
			font-size: rpx(13);

			.point {
				background-color: #fb5d00;
			}
		}

		my-imagetext {
			margin-left: rpx(12);
		}

		.divider {
			width: rpx(325);
			height: rpx(1);
			min-height: 1rpx;
			background-color: #f4f4f4;
			margin: rpx(10) auto;
		}

		.point {
			width: rpx(10);
			height: rpx(10);
			margin: auto rpx(10) auto rpx(12);
			border-radius: rpx(10);
		}
	}

	.empty {
		display: flex;
		justify-content: center;

		image {
			width: rpx(200);
			height: rpx(200);
		}
	}
</style>